import React from "react";
import { Button } from "../ui/button";
import { recognizePixels } from "@/lib/pixel-recognition";

const ImageUploaderAndRecognize = ({ setPixelGrid }) => {
  const handleImageUpload = async (event) => {
    const file = event.target.files[0];
    if (!file) {
      return;
    }
    const recognizedPoints = await recognizePixels(file);
    console.log(JSON.stringify(recognizedPoints));
    setPixelGrid(recognizedPoints);
  };

  return (
    <div>
      <Button asChild size="sm">
        <label htmlFor="image-upload" className="mb-2">
          上传 Logo 图片
        </label>
      </Button>
      <input
        id="image-upload"
        type="file"
        className="hidden"
        accept="image/*"
        onChange={handleImageUpload}
      />
    </div>
  );
};

export default ImageUploaderAndRecognize;
